import { useDrag } from 'react-dnd'
import StecilIcon from './StecilIcon'

const PaletteItem = ({
  children,
  stencil
}) => {

  const [, drag] = useDrag({
    type: 'PROCESS_DESIGNER',
    item: {
      dragType: 'palette',
      stencil: stencil
    }
  })

  return <div className="palette-group-item" ref={drag}>
    <StecilIcon stencil={stencil}></StecilIcon>
    <div
      className="palette-group-item-text"
    >{children}</div>
  </div>

}

export default PaletteItem
